<!DOCTYPE>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/transfer.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Transfer Effect</title>
  </head>
  <body>
    <div id="container">
      <div id="productContainer">
        <img alt="GTX 280" src="img/gcard.jpg"/>
        <p>
        	BFG GTX 280 OC 1GB GDDR3 Dual DVI HDTV Out PCI-E Graphics Card
        </p>
        <p id="price">
        	价格: $350
        </p>
        <div id="purchase">
        	<button id="buy">购买</button>
        </div>
      </div>
      <div id="basketContainer">
        <div id="basket"></div>
        <p>
        	购物车数量 <span id="total">0</span>
        </p>
      </div>
    </div>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
			$(function() {	
				$("#buy").click(function() {
					$("#productContainer img").effect("transfer", { to:"#basket" }, 750, function() {
						var currentTotal = $("#total").text();
						numeric = parseInt(currentTotal);
						$("#total").text(numeric + 1);
						});
					});
			});
		</script>
  </body>
</html>
